<template>
	<view class="content_box">
		<header-box :title="'客户意见反馈表'"></header-box>

		<view class="flex justify-center align-center mt73">
			<image class="504 h30 mb54" src="https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/00 (1).png" mode="">
			</image>
		</view>


		<view class="wrap">
			<u-upload style="width: 100%; height: 100%; margin: 0 auto;
				display: flex; align-items: center;
				justify-content: center;"
				max-count="1" width="624" height="918" :action="action"
				:custom-btn="true" :deletable="false"
				:file-list="fileList">
				<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
					<image class="w64 h60 " src="../../static/pz.png" mode=""></image>
				</view>
			</u-upload>
		</view>






		<view class="ww90 r49 f34 ml22 mr22 lh89 add text-center" style="color: #FFFFFF; background-color: #FA469D;">
			<!-- <view class="cu-btn ww96 h98 r49 f34"
				>提交审核</view> -->
			提交审核
		</view>







		<yy-home></yy-home>

		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				action: this.$UPLOAD, // 演示地址
				showUploadList: false,
				// 如果将某个ref的组件实例赋值给data中的变量，在小程序中会因为循环引用而报错
				// 这里直接获取内部的lists变量即可
				lists: []
			};
		},
		onShow() {},
		onLoad(e) {},
		methods: {
			clkOn() {
				this.z.load(this);
				setTimeout(() => {
					this.z.load(this, 0);
				}, 3000);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
			},

			radioGroupChange2(e) {
				console.log(e);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content_box {
		width: 100%;
		height: 100vh;
		// padding: 0 22rpx;
		background-color: #9885F8;
		position: relative;

		.wrap {
			width: 100%;
			height: 73%;
			display: flex;
			align-items: center;
			justify-content: center;

			// .u-list-item {
			// 	width: 100%;
			// 	height: 100%;
			// }

			// /deep/.u-upload data-v-3d60ab68 {
			// 	width: 100%;
			// 	height: 100%;
			// }

			// .u-upload data-v-3d60ab68 {

			// }

			/deep/ .u-list-item.data-v-3d60ab68 {
				width: 200rpx;
				height: 200rpx;
				overflow: hidden;
				margin: 10rpx;
				background: transparent;
				position: relative;
				border-radius: 10rpx;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				-webkit-box-align: center;
				-webkit-align-items: center;
				align-items: center;
				-webkit-box-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
			}

		}




		.add {
			height: 89rpx;
			position: absolute;
			bottom: 60rpx;
		}

		.slot-btn {
			width: 160rpx;
			height: 160rpx;
			display: flex;
			margin: 0 auto;
			justify-content: center;
			align-items: center;
			background: #C2B6FB;
			border-radius: 80rpx;
		}

		.slot-btn__hover {
			background-color: rgb(235, 236, 238);
		}
	}
</style>
